<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>所有歌单</title>
    <link th:href="@{/static/L-img/font_2608475_frsgtjufoku/iconfont.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/L-img/font_2550907_osj83i90mhl/iconfont.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/L-img/font_2533053_iojhpwhxp0b/iconfont.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/L-css/L-singlist.css}" rel="stylesheet" type="text/css">
    <link rel="shortcut icon"  th:href="@{/static/L-img/L-image/L-logo.png}">


</head>
<body>
    <div class="all">
        <!-- 头部 -->
        <div class="header">
            <div class="kMusic">
                <img th:src="@{/static/L-img/L-image/future1.jpg}"/>
            </div>
            <ul class="manya">
                <li><a th:href="@{/}">发现音乐</a></li>
                <li><a class="vipBtn">VIP会员</a></li>
                <li><a class="myMusic">我的音乐</a></li>
            </ul>
            <!-- 搜索和登录注册 -->
            <div class="right">
                <div class="headCenter">
                    <div class="headCenterSearch">
                        <form th:action="@{/music/queryByNameMusic}" method="get" class="seekForm" id="seekGoodsForm">
                            <input id="goSearch" autocomplete="off" type="text" name="queryMusicName" placeholder="搜索歌手/歌单/MV/歌词" />
                            <input type="submit" id="actSearch" value="搜索"/>
                        </form>
                    </div>
                </div>
                <div class="login">
                    <a th:href="@{/loginpage}">登录</a>
                </div>
                <div class="persons" >
                    <span>欢迎</span>
                    <block th:if="${session.USER}!=null">
                        <span class="userName" th:text="${session.USER.userName}">用户名</span>
                    </block>
                    <span class="out">退出登录</span>
                </div>
            </div>
        </div>
        <!--    退出登录的代码-->
        <div class="hideLogOut">
            <div class="hideLogOutContent">
                <h2 class="chooseLogOut">是否退出登录</h2>
                <div class="logOutBtn">
                    <button class="logOutNoBtn">取 消</button>
                    <button class="logOutYesBtn">确 认</button>
                </div>
            </div>
        </div>
        <!-- 中间主体部分 -->
        <div class="subject">
            <div class="recomment">
                <ul>
                    <li><a th:href="@{/}">推荐</a></li>
                    <li><a href="javascript:;">排行吧榜</a></li>
                    <li><a th:href="@{/music/queryAllSinger}">歌手</a></li>
                    <li class="refer"><a th:href="@{/music/allMusic}">歌单</a></li>
                    <li><a th:href="@{/toMvpaper}">MV</a></li>
                </ul>
            </div>
            <div class="allSongList">
                <h1>歌曲列表</h1>
                <div class="showSongs">
                    <table class="inquireThead" cellspaccing="0">
                        <thead class="inquireThead">
                            <tr class="inquireTheadTr">
                                <th>序号</th>
                                <th>歌曲</th>
                                <th>专辑</th>
                                <th>时长</th>
                            </tr>
                        </thead>
                         <tbody class="inquireTbody">
                            <tr th:each="music,loopStatus:${Musics}">
                                <td th:text="${loopStatus.count}">1</td>
                                <td class="nameA"><a th:text="${music.mcName}" th:href="@{/music/queryByIdAlbmusic(mcId=${music.mcId})}"></a></td>
                                <td th:text="${music.albName}">呼吸之野</td>
                                <td th:text="${music.mcTime}">1</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="page-wrap">
<!--                        <button class="toFirst"><i class="iconfont icon-diyiyeshouyeshangyishou"></i></button>-->
<!--                        <button class="toLast"><i class="iconfont icon-daoweiye"></i></button>-->
<!--                        <p>第 <input type="text" value="1" class="toPage"/> 页</p>-->
<!--                        <div> 共 <p class="allPage">2</p> 页 </div>-->
<!--                        <button class="prePage"><i class="iconfont icon-xiangzuo"></i></button>-->
<!--                        <button class="nextPage"><i class="iconfont icon-youbian"></i></button>-->
                        <button class="toFirst"><i class="iconfont icon-diyiyeshouyeshangyishou"></i></button>
                        <button class="toLast"><i class="iconfont icon-daoweiye"></i></button>
                        <p>第 <input type="text" th:value="${page}" class="toPage"/> 页</p>
                        <div> 共 <p class="allPage" th:text="${sumPage}">2</p> 页 </div>
                        <button class="prePage"><i class="iconfont icon-xiangzuo"></i></button>
                        <button class="nextPage"><i class="iconfont icon-youbian"></i></button>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--没有登录会弹出一个提示的弹窗-->
    <div class="hideVipLoad">
        <div class="hideVipLoadForm">
            <div class="hideVipTop">
                <h5>提示</h5>
                <button class="closeVip"><span>x</span></button>
            </div>
            <div class="popub">
                <div class="popub-inner">
                    <div class="popub-img">
                        <img th:src="@{/static/L-img/L-image/point.png}"/>
                    </div>
                    <p class="popub-desc">你还没有登录，请先登录!</p>
                </div>
            </div>
            <div class="hideFormBottom">
                <button class="loadBtn">登录</button>
            </div>
        </div>
    </div>
    <!--分页的弹窗-->
    <div class="hideLoad">
        <div class="hideLoadForm">
            <div class="hideLoadFormTop">
                <h5>未来音乐提示你</h5>
                <button class="closeLoad"><span>x</span></button>
            </div>
            <div class="popub">
                <div class="popub-inner">
                    <div class="popub-img">
                        <img th:src="@{/static/L-img/L-image/point.png}"/>
                    </div>
                    <p class="popub-desc">这就是首页！</p>
                </div>
            </div>
        </div>
    </div>
    <!--分页的弹窗 end-->
    <!--分页的弹窗-->
    <div class="hideLast">
        <div class="hideLastForm">
            <div class="hideLoadFormTop">
                <h5>未来音乐提示你</h5>
                <button class="closeLoad"><span>x</span></button>
            </div>
            <div class="popub">
                <div class="popub-inner">
                    <div class="popub-img">
                        <img th:src="@{/static/L-img/L-image/point.png}"/>
                    </div>
                    <p class="popub-desc">这已经就是尾页了！</p>
                </div>
            </div>
        </div>
    </div>
    <!--分页的弹窗 end-->
</body>
<script th:src="@{/static/L-js/singerList.js}" rel="script" type="text/javascript"></script>
</html>